<template>
  <div>
    <!--预约挂号-->
    <div>
      <div class="shouye">
        <div class="blue"></div>
        <h1>订单详情</h1>
      </div>
      <br/>
    </div>

    <div class="hzxx">
      <p>患者信息</p>
      <el-card class="box-card">
        <div class="hzxx_box1">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="患者姓名">
              <el-input
                v-model="recordVoWL.thePatient.name"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="证件类型">
              <el-input
                v-model="recordVoWL.thePatient.documentType"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>

            <el-form-item label="就诊人地址">
              <el-input
                v-model="recordVoWL.thePatient.address"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            disabled
            :model="formLabelAlign"
          >
            <el-form-item label="就诊卡号">
              <el-input
                v-model="recordVoWL.thePatient.hospitalNumber"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input
                v-model="recordVoWL.thePatient.number"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input
                v-model="recordVoWL.thePatient.phone"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            disabled
            :model="formLabelAlign"
          >
<!--            <el-form-item label="患者头像">-->
<!--              <el-input-->
<!--                v-model="thepatient.name"-->
<!--                style="width:250px"-->
<!--                disabled-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="关系">
              <el-input
                v-model="recordVoWL.thePatient.relation"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>

    <div class="yyxx" style="height: 300px">
      <p>就诊信息</p>
      <el-card class="box-card" style="height: 300px">
        <div class="hzxx_box1">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="就诊医院">
              <el-input
                v-model="recordVoWL.campus.campusName"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="就诊医生">
              <el-input
                v-model="recordVoWL.doctor.doctorName"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="费用类型">
              <el-input
                v-model="recordVoWL.rechargeExplain"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
<!--            <el-form-item label="费用">-->
<!--              <el-input-->
<!--                v-model="recordVoWL.money"-->
<!--                style="width:250px;"-->
<!--                disabled-->
<!--              ></el-input>-->
<!--            </el-form-item>-->

          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="医院地址">
              <el-input
                v-model="recordVoWL.campus.campusAddress"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="医生职称">
              <el-input v-model="recordVoWL.doctor.jobTitle" style="width:250px;" disabled>
              </el-input>
            </el-form-item>


          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="就诊科室">
              <el-input
                v-model="recordVoWL.divisionType.divisionName"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
<!--            <el-form-item label="业务类型">-->
<!--              <el-input-->
<!--                v-model="nucleicacid.cost"-->
<!--                style="width:250px;"-->
<!--                disabled-->
<!--              >-->
<!--              </el-input>-->
<!--            </el-form-item>-->
          </el-form>
        </div>
<!--          &lt;!&ndash; 药品记录     &ndash;&gt;-->
<!--        <div style="clear: both; ">-->
<!--          <div style="color: #e9c9b2;font-size: 20px;float: left">费用明细</div>-->
<!--        </div>-->
<!--        <div style="clear: both; width: 800px;background-color: red;float: left;margin-top: 20px">-->
<!--          &lt;!&ndash; 表格 &ndash;&gt;-->
<!--          <el-table-->
<!--            v-loading="listLoading"-->
<!--            :data="list.d"-->
<!--            border-->
<!--            element-loading-text="数据加载中"-->
<!--            fit-->
<!--            highlight-current-row-->
<!--            @selection-change="handleSelectionChange"-->
<!--          >-->

<!--            <el-table-column type="selection" width="55"></el-table-column>-->

<!--            <el-table-column prop="drugsName" label="药品名称" align="center"></el-table-column>-->
<!--            <el-table-column prop="drugsPrice" label="药品单价" align="center"></el-table-column>-->
<!--            <el-table-column prop="useNumber" label="药品数量" align="center"></el-table-column>-->
<!--            <el-table-column prop="price" label="总价" align="center"></el-table-column>-->
<!--&lt;!&ndash;            <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;              prop="creationTime"&ndash;&gt;-->
<!--&lt;!&ndash;              label="缴费时间"  width="180px" align="center"&ndash;&gt;-->
<!--&lt;!&ndash;            ></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;              prop="thePatient.number"&ndash;&gt;-->
<!--&lt;!&ndash;              label="订单号" width="160px"&ndash;&gt;-->
<!--&lt;!&ndash;              align="center"&ndash;&gt;-->
<!--&lt;!&ndash;            ></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;              prop="thePatient.phone"&ndash;&gt;-->
<!--&lt;!&ndash;              label="就诊人手机号" width="120px"&ndash;&gt;-->
<!--&lt;!&ndash;              align="center"&ndash;&gt;-->
<!--&lt;!&ndash;            ></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;              prop="thePatient.number"&ndash;&gt;-->
<!--&lt;!&ndash;              align="center"&ndash;&gt;-->
<!--&lt;!&ndash;              label="就诊人身份证号" width="160px"&ndash;&gt;-->
<!--&lt;!&ndash;            ></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;              prop="patientCard.cardNo"&ndash;&gt;-->
<!--&lt;!&ndash;              label="就诊卡号" width="120px"&ndash;&gt;-->
<!--&lt;!&ndash;              align="center"&ndash;&gt;-->
<!--&lt;!&ndash;            ></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column prop="thePatient.relation" label="关系" align="center"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column prop="rechargeExplain" label="业务类型" align="center"></el-table-column>&ndash;&gt;-->

<!--&lt;!&ndash;            <el-table-column prop="money" label="支付金额" align="center"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;            &lt;!&ndash;        <el-table-column prop="modificationTime" label="缴费时间" width="180px" align="center"></el-table-column>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column prop="patientCard.balance" label="卡内余额" align="center"></el-table-column>&ndash;&gt;-->


<!--          </el-table>-->


<!--        </div>-->
      </el-card>




    </div>

    <div class="yyxx">
      <p>订单信息</p>
      <el-card class="box-card" style="height:360px;">
        <div class="hzxx_box1">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="订单总额">
              <el-input
                v-model="recordVoWL.money+'￥'"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-input
                v-model="jsj.state"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="订单备注">
              <el-input
                v-model="waitingrecord.createTime"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>

          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="支付方式">
              <el-input
                v-model="jsj.zhifufangshi"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="订单编号">
              <el-input v-model="recordVoWL.drugRecordSerialNumber" style="width:250px;" disabled>
              </el-input>
            </el-form-item>


          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="卡内余额">
              <el-input
                v-model="recordVoWL.patientCard.balance"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="支付时间">
              <el-input
                v-model="recordVoWL.creationTime"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="anniu">
          <el-button type="primary" plain @click="quxiao">确定</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      id: "",
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      },
      nucleicacid: [],
      thepatient: [],
      doctor: [],
      waitingrecord: [],
      divisiontype: [],
      campus: [],
      recordVoWL:{},
      jsj:{
        state:"已支付",
        zhifufangshi:"微信支付",
      },
      //药品记录
      list: null, //查询之后接口返回集合
      total: 0, //总记录数vu
      teacherQuery: {
        page: 1, //当前页
        limit: 5, //每页记录数
      }, //条件封装的对象
      loading: false,//上传的loading
      listLoading: false,//上传的loading
    };
  },
  created() {
    //接收id
    this.id = localStorage.getItem("id");
    //  alert( this.id)
    //页面渲染之前执行，一般调用methods定义的方法
    this.getByIdnucleicacid();
  },
  methods: {
    getByIdnucleicacid() {
      this.$axios
        .get("/record/record/record/getByRID/" + this.id)
        .then(res => {
          if (res.data.code == 20000) {
            this.recordVoWL = res.data.data.recordVoWL;
            this.list = res.data.data.recordVoL;
            console.log(this.list)
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    quxiao() {
      window.history.back(-1);
    }
  }
};
</script>

<style>
.shouye {
  margin-top: 10px;
}

.blue {
  width: 36px;
  height: 12px;
  background-color: blue;
  float: left;
  margin-left: 20px;
  margin-top: 6px;
  border-radius: 50px;
}

.shouye h1 {
  float: left;
  margin-top: -4px;
  margin-left: 10px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  height: 260px;
}

.hzxx {
  background-color: #e6e6e6;
}

.hzxx p {
  width: 200px;
  margin-left: -40px;
  color: #4da6ff;
}

.hzxx_box1 {
  width: 300px;
  float: left;
}

.hzxx_box2 {
  float: left;
  margin-left: 100px;
}

.yyxx {
  background-color: #e6e6e6;
}

.yyxx p {
  width: 200px;
  margin-left: -40px;
  color: #4da6ff;
}

.anniu {
  width: 400px;
  height: 50px;
  margin-left: 100px;
  margin-top: 240px;
}
</style>
